<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品搜索模板</title>
    <style>
        table.gridtable {
			font-family: verdana,arial,sans-serif;
			font-size:11px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
			width:1000px;
			margin:0 auto;
		}
		table.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			background-color: #409eff;
			border-color: #409eff;
			height:25px;
			font-size:15px;
		}
		table.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
			height:30px;
			font-size:15px;
		}
        input {
            width: 100px;
			padding:8px 12px;
        }
        .search {
            width: 1000px;
            margin: 20px auto;
        }
		button{
			background-color: #f85a29;
			box-shadow: 0 4px 20px #f9764d;
			outline: none;
			border:none;
			cursor:pointer;
			padding:8px 20px;
			color:#fff;
		}
    </style>
    <script src="js/jquery2.1.4.min.js" type="text/javascript"></script>
    
</head>

<body>
    <div class="search">
        <p>按照价格查询: <input type="text" class="start"> -<input type="text" class="end"> <button class="priceBtn">搜索</button></p>
		<p>按照商品名称查询: <input type="text" class="gname"> <button class="gnameBtn">查询</button></p>
    </div>
    <table class="gridtable">
        <thead>
            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="content">
			<!-- <tr>
				<td>1</td>
				<td>华为</td>
				<td>299.98</td>
			</tr> -->
        </tbody>
    </table>
    <script src="js/good.js" type="text/javascript"></script>
</body>

</html>